﻿<template>
    <div class="page-main Stock">
        <DataTable ref="StockDataTableRef" :data="list" :hasAdd="false && !isSelect" :hasFilter="false" :hasCheckbox="false" :page-index="pageInfo.pageIndex" :page-size="pageInfo.pageSize" :total-count="pageInfo.totalCount" @page-change="onPageChange" @search-filter="onSearchFilter" @clear-filter="onClearFilter" @show-detail="onShowDetail" v-bind="$attrs">
            <vxe-column title="仓库" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.warehouseName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="钢丝绳编码" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.code || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="钢丝绳名称" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.name || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="规格型号" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.guiGe || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="直径" min-width="120" show-overflow>
                <template #default="{ row }"> {{ row.diameter || "-" }}mm </template>
            </vxe-column>

            <vxe-column title="公称捻距" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.nianJu || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="抗拉强度" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.mpaName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="表面状态" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.surfaceStatusName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="捻制类型" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.twistingTypeName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="长度" min-width="120" show-overflow>
                <template #default="{ row }"> {{ row.lengthNum || "-" }}m </template>
            </vxe-column>

            <vxe-column title="绳子条数" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.cnt || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="维保周期" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.keepDay || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="供应商" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.supplierName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="制造商" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.producerName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="矿山" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.department_Name || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="提升机类型" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.hoisterName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="提升用途" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.hoisterUsageName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="钢丝绳类型" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.wireropeTypeName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="备注" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.remark || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="操作" min-width="180" fixed="right" v-if="!isSelect">
                <template #default="{ row }">
                    <el-button type="warning" @click="onShowDetail(row, true)">详情</el-button>
                    <el-button type="primary" @click="onShowDetail(row, false)" v-if="Gx.HasPermission(30102)">编辑</el-button>
                </template>
            </vxe-column>

            <!-- 在添加按钮后面的搜索条件 -->
            <template #otherFilter>
                <el-input class="placeholder-center" v-model="filterModel._Code" placeholder="钢丝绳编码" clearable></el-input>
                <el-input class="placeholder-center" v-model="filterModel._Name" placeholder="钢丝绳名称" clearable></el-input>
                <DataSelect table="Warehouse" placeholder="请选择仓库" v-model:id="filterModel._WarehouseIDs" v-if="!isSelect && store.me.loginUserType == Enums.RefreshToken_LoginType.集团" multiple collapse-tags></DataSelect>
                <DataSelect table="Department" placeholder="请选择矿山" :filter="{ _Type: Enums.Department_Type.矿山 }" v-model:id="filterModel._DepartmentIDs" multiple collapse-tags></DataSelect>
            </template>
            <!-- 在搜索按钮后面的按钮 -->
            <template #otherBtn></template>

            <!-- 顶部右侧按钮 -->
            <template #rightBtn v-if="!isSelect">
                <el-button-group>
                    <el-button v-if="Gx.HasPermission(30103)" type="warning" @click="onExport">导出</el-button>
                </el-button-group>
            </template>

            <!-- 高级搜索内容 -->
            <template #Advfilter>
                <!-- <el-form v-model="filterModel" label-position="top" @submit.prevent></el-form> -->
            </template>
        </DataTable>

        <!-- 库存信息详情 -->
        <StockDetail ref="StockDetailRef" v-if="isShowDetail" @close="onCloseDetail"></StockDetail>
    </div>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { TipsType } from "@/_gx/TsEnums";
import StockDetail from "./StockDetail.vue";
import LAY_EXCEL from "lay-excel";
import { tokenStore } from "@/stores/tokenStore";
const store = tokenStore();

/********************************************** 接收参数 **********************************************/

const props = defineProps({
    //是否为选择组件，在此组件用做弹框选择的子组件时传true
    isSelect: {
        type: Boolean,
        default: false,
    },

    //默认搜索条件，如果是多选的话可以增加已选数据的过滤
    defaultFilter: {
        type: Object,
        default: {},
    },
});

/********************************************** 列表相关定义 **********************************************/

//表格的数据
const list = ref([]);

//分页信息
const pageInfo = reactive({
    pageIndex: 1,
    pageSize: 20,
    totalCount: 0,
    orderBy: "[x].[StockID] DESC",
});

//搜索条件
const filterModel = ref<any>({ _IsOut: false });

//搜索条件空对象的json字符串，用于清空搜索条件时使用
const filterModelJson = Gx.SerializeObject(filterModel.value);

//DataTable对象，使用此对象来调用DataTable组件中抛出的属性或方法
const StockDataTableRef = ref(null);

/********************************************** 列表方法与事件 **********************************************/

//页面加载
onMounted(() => {
    Init();
});

//初始化
const Init = () => {
    GetPage();
};

//分页方法
const GetPage = () => {
    let _data = {};

    MergeObjs(_data, filterModel.value, props.defaultFilter);

    App.CallApi(Api.Stock.GetPage(pageInfo.pageIndex, pageInfo.pageSize, pageInfo.orderBy), {
        data: _data,
        success: (res: any) => {
            list.value = res.items;
            pageInfo.totalCount = res.totalCount;

            //在这里抛出一个事件，用来处理当此组件用于选择弹框时数据回显的选中功能
            emits("setSelectData");
        },
    });
};

//分页改变
const onPageChange = (data: any) => {
    pageInfo.pageIndex = data.currentPage;
    pageInfo.pageSize = data.pageSize;
    GetPage();
};

//高级搜索点击搜索按钮
const onSearchFilter = () => {
    pageInfo.pageIndex = 1;
    GetPage();
};

//高级搜索点击清空按钮
const onClearFilter = () => {
    filterModel.value = Gx.DeserializeObject(filterModelJson);
    pageInfo.pageIndex = 1;
    GetPage();
};

/********************************************** 列表按钮功能 **********************************************/

//导出
const onExport = async () => {
    let _data = {};

    MergeObjs(_data, filterModel.value);

    let dataList;
    await App.CallApi(Api.Stock.GetPage(1, 9999999, pageInfo.orderBy), {
        data: _data,
        success: (res: any) => {
            for (var i = 0; i < res.items.length; i++) {
                res.items[i].index = i + 1;
            }

            dataList = res.items;
        },
    });

    //设置数据
    dataList = LAY_EXCEL.filterExportData(dataList, {
        index: "index",
        warehouseName: "warehouseName",
        code: "code",
        name: "name",
        guiGe: "guiGe",
        diameter: (value, row, data) => {
            return Gx.IsEmpty(row.diameter) ? "" : row.diameter + " mm";
        },
        nianJu: "nianJu",
        mpaName: "mpaName",
        surfaceStatusName: "surfaceStatusName",
        twistingTypeName: "twistingTypeName",
        lengthNum: (value, row, data) => {
            return Gx.IsEmpty(row.lengthNum) ? "" : row.lengthNum + " m";
        },
        cnt: "cnt",
        keepDay: "keepDay",
        supplierName: "supplierName",
        producerName: "producerName",
        department_Name: "department_Name",
        hoisterName: "hoisterName",
        hoisterUsageName: "hoisterUsageName",
        wireropeTypeName: "wireropeTypeName",
        remark: "remark",
    });

    //设置表头
    dataList.unshift({
        index: "序号",
        warehouseName: "仓库名称",
        code: "钢丝绳编码",
        name: "钢丝绳名称",
        guiGe: "规格型号",
        diameter: "直径",
        nianJu: "公称捻距",
        mpaName: "抗拉强度",
        surfaceStatusName: "表面状态",
        twistingTypeName: "捻制类型",
        lengthNum: "长度",
        cnt: "绳子条数",
        keepDay: "维保周期",
        supplierName: "供应商",
        producerName: "制造商",
        department_Name: "矿山",
        hoisterName: "提升机类型",
        hoisterUsageName: "提升用途",
        wireropeTypeName: "钢丝绳类型",
        remark: "备注",
    });

    //设置单元格居中、边框
    let rows = "A1:T" + Number(dataList.length);
    LAY_EXCEL.setExportCellStyle(dataList, rows, {
        s: {
            alignment: {
                horizontal: "center",
                vertical: "center",
            },
            border: {
                top: { style: "thin", color: { rgb: "FF000000" } },
                bottom: { style: "thin", color: { rgb: "FF000000" } },
                left: { style: "thin", color: { rgb: "FF000000" } },
                right: { style: "thin", color: { rgb: "FF000000" } },
            },
        },
    });

    //配置列宽
    var colConf = LAY_EXCEL.makeColConfig(
        {
            A: 40,
            T: 120,
        },
        100
    );

    //导出
    LAY_EXCEL.exportExcel({ Sheet1: dataList }, `库存管理.xlsx`, "xlsx", { extend: { "!cols": colConf } });
};

/********************************************** 详情页相关 **********************************************/

//是否显示详情对话框
const isShowDetail = ref(false);
//详情对话框Ref对象
const StockDetailRef = ref(null);
//向子组件传值
const stockID = ref<number | null>(null);
provide("stockID", stockID);

//显示详情
const onShowDetail = (row, flag) => {
    isShowDetail.value = true;
    stockID.value = row?.autoID;
    nextTick(() => {
        StockDetailRef.value.Init(flag);
    });
};

//关闭详情
const onCloseDetail = (isRefresh: boolean) => {
    if (isRefresh) {
        GetPage();
    }

    isShowDetail.value = false;
};

//向上抛出的事件与方法
const emits = defineEmits(["setSelectData"]);
defineExpose({ StockDataTableRef });
</script>
